<template>
  <div>
    <div class="banner container-fuild text-center">个人中心</div>
    <div class="container">
      <Layout class="layout"
              style="box-shadow: 0 1px 2px #c8c8c8;border:1px solid #c8c8c8">
        <Sider class="side-bar"
               :style="{height: 'calc(100vh - 35px)', background: '#fff', overflow: 'auto'}"
               ref="side"
               :collapsed-width="78">
          <Menu active-name="1-2"
                theme="light"
                width="auto"
                @on-select="onSelect">
            <div class="user-icon">
              <div class="user-img">
                <img src="../assets/img/userimg.jpg">
              </div>
              <p>{{this.$store.getters.userinfo.name}}</p>
            </div>
            <Submenu name="1">
              <template slot="title">
                <Icon type="location"></Icon>
                <span>用户信息</span>
              </template>
              <MenuItem name="myinfo">我的账号信息</MenuItem>
              <MenuItem name="myaddress">我的收货地址</MenuItem>
            </Submenu>
            <Submenu name="2">
              <template slot="title">
                <Icon type="clipboard"></Icon>
                <span>用户管理</span>
              </template>
              <MenuItem name="addinfo">修改信息</MenuItem>
              <MenuItem name="addaddress">添加地址</MenuItem>
              <MenuItem name="userUp">用户认证</MenuItem>
            </Submenu>
            <Submenu name="3">
              <template slot="title">
                <Icon type="clipboard"></Icon>
                <span>用户收藏</span>
              </template>
              <MenuItem name="mylike">新闻收藏</MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout class="layout">
          <div class="infotitle">{{activeTitle}}</div>
          <Content class="content">
            <transition mode="out-in">
              <router-view></router-view>
            </transition>
          </Content>
        </Layout>
      </Layout>
    </div>
    >
    <!-- <div class="main">
  <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
    <template slot="extra">
      <el-button type="primary" size="small">操作</el-button>
    </template>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
      kooriookami
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      18100000000
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        居住地
      </template>
      苏州市
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        备注
      </template>
      <el-tag size="small">学校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        联系地址
      </template>
      江苏省苏州市吴中区吴中大道 1188 号
    </el-descriptions-item>
  </el-descriptions>
    </div> -->
  </div>
</template>
<script>
export default {
  name: "Userinfo",
  data () {
    return {
      activeTitle: '我的信息',
      bar: {
        'myinfo': '我的信息',
        'addinfo': '修改信息',
        'myaddress': '我的地址',
        'addaddress': '添加地址',
        'mylike': '我的收藏',
        'userUp': '用户认证'

      }
    };
  },
  created () {

  },
  methods: {
    onSelect (name) {
      console.log(name)
      console.log(this.bar[name])

      this.activeTitle = this.bar[name];
      // this.$router.push(`/userinfo/${name}`);
      if (name == 'userUp') {
        this.$router.push(`/usersup`);
      } else {
        this.$router.push(`/${name}`);
      }

    }
  }

}
</script>

<style >
.banner {
  color: #fff;
  font-size: 30px;
  height: 190px;
  line-height: 190px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
  margin-bottom: 20px;
}

/* .main{
  width: 60%;
  margin: 20px auto;
} */
.infotitle {
  width: 100%;
  /* margin-bottom: 0px ; */
  height: 70px;
  line-height: 70px;
  text-align: center;
  color: #464c5b;
  background: #fff;
  font-size: 20px;
  font-weight: bold;
}

.side-bar a {
  color: #232323;
}
.user-icon {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.user-icon span {
  font-size: 96px;
}
.user-img {
  margin-bottom: 15px;
  width: 96px;
  height: 96px;
  border-radius: 48px;
  overflow: hidden;
}
.user-img img {
  width: 100%;
}
.content {
  margin: 15px;
  background-color: #fff;
  padding: 15px;
}
.layout-footer-center {
  padding: 0px 15px;
  padding-bottom: 15px;
  text-align: center;
}
</style>




